<template>
    <el-scrollbar class="ListBox" element-loading-background="rgba(255, 255, 255, 0)" native>
        <div class="add-box">
            <!-- 列表头的操作内容 -->
            <slot></slot> 
        </div>
        <div class="list">
            <div v-if="type == 'hash'">
                <div class="item" v-for="item in list" :key="item" @click="$emit('onClick', item)" :class="{'is-edit':false}">
                    <span class="con">{{item.key}}</span>
                    <span class="con">{{item.value}}</span>
                    <div class="btn-delete" @click.stop="$emit('onDelete', item)">
                        <i class="el-icon-delete"></i>
                    </div>
                </div>
            </div>
            <div v-if="type == 'set'">
                <div class="item" v-for="item in list" :key="item" @click="$emit('onClick', item)" :class="{'is-edit':false}">
                    <span class="con">{{item}}</span>
                    <div class="btn-delete" @click.stop="$emit('onDelete', item)">
                        <i class="el-icon-delete"></i>
                    </div>
                </div>
            </div>
            <div v-if="type == 'list'">
                <div class="item" v-for="item in list" :key="item" @click="$emit('onClick', item)" :class="{'is-edit':false}">
                    <span class="number">{{item.index}}</span>
                    <span class="con">{{item.value}}</span>
                    <div class="btn-delete" @click.stop="$emit('onDelete', item)">
                        <i class="el-icon-delete"></i>
                    </div>
                </div>
            </div>
            <div v-if="type == 'zset'">
                <div class="item" v-for="item in list" :key="item" @click="$emit('onClick', item)" :class="{'is-edit':false}">
                    <span class="number">{{item.score}}</span>
                    <span class="con">{{item.element}}</span>
                    <div class="btn-delete" @click.stop="$emit('onDelete', item)">
                        <i class="el-icon-delete"></i>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>

<script>
import { defineComponent } from 'vue';
import { mapGetters } from 'vuex'
export default defineComponent({
    name: 'ListBox',
    props: {
        list: Array,
        // type: String
    },
    computed: {
        ...mapGetters([
            'key_type'
        ]),
        type(){
            return this.key_type
        }
    },
})
</script>

<style lang="less" scoped>
// 操作栏
.add-box {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
}

// 列表
.list {
    flex: 1;
    width: 100%;
    position: relative;
    // padding: 2px 8px;
    .item {
        // line-height: 38px;
        height: 38px;
        width: 100%;
        // width: calc(100% - 21px); // 减去右边展开按钮的宽度
        // width: calc(100% - 5px); // 减去右边展开按钮的宽度
        transition: all 0.2s;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        &:hover {
            background-color: #dddddd50;
            // box-shadow: 0 0 10px #aaaaaa80;
        }
        &.is-edit {
            .con {
                color: #3498db;
            }
        }
        .number {
            padding-left: 6px;
            font-size: 14px;
            padding-right: 10px;
            color: #00000080;
        }
        .con {
            padding-left: 7px;
            // user-select: none;
            flex: 1;
            text-align: left;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            transition: color 0.2s;
        }
        .btn-delete {
            padding: 0px 10px;
            font-size: 17px;
            line-height: 38px;
            &:hover {
                background-color: #eee;
                color: #f00;
            }
        }
        .btn-edit {
            padding: 0px 10px;
            font-size: 17px;
            &:hover {
                background-color: #eee;
                color: #3498db;
            }
        }
    }
    // 更多
    .a-content {
        width: 100%;
        text-align: left;
        padding-right: 10px;
    }
}
</style>